<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ok{
            color: green;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
名字<input type="text" id="name" onblur="checkName()"/>
<span id="nameMsg"></span>
<br/>

邮箱<input type="text" id="email" onblur="checkEmail()"/>
<span id="emailMsg"></span>

<script src="jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script>
    function checkName () {
        var name = $('#name').val();
        var regex = /[a-zA-Z0-9_]{5,10}/;
        if (regex.test(name)) {
            $('#nameMsg').html('该用户名格式正确');
            $('#nameMsg').removeClass();
            $('#nameMsg').addClass('ok');
        } else {
            $('#nameMsg').html('5-10位的字母、数字、下划线');
            $('#nameMsg').removeClass();
            $('#nameMsg').addClass('error');
        }
    }
</script>
</body>
</html>